<template>
  <div class="about">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
    >
	<el-form-item label="账号:" prop="name">
	    <el-input v-model="ruleForm.name" />
	</el-form-item>
	<el-form-item label="密码:" prop="pass">
	    <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
	</el-form-item>
	<el-form-item label="用户类型:" prop="type">
	    <el-radio-group v-model="ruleForm.type">
	        <el-radio label="系统管理员" />
	        <el-radio label="健康管家" />
	    </el-radio-group>
	</el-form-item>
	<el-form-item>
	      <el-button type="primary" @click="submitForm(ruleFormRef)">
	        登录
	      </el-button>
	      <el-button @click="resetForm(ruleFormRef)">清空</el-button>
	    </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
// 不要加type,那是ts,去掉尖括号
import { FormInstance,ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import {login} from '../utils/requests/login.js'

const router = useRouter();
const ruleFormRef = ref(FormInstance)
const ruleForm = reactive({
  name: '',
  pass:'',
  type:'',
})

//表单校验
const rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    // { min: 1, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  pass: [
	  { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  type: [
      {
        required: true,
        message: '请选择用户类型',
        trigger: 'change',
      },
  ],
})

// 去掉formE1的参数，await用来同步，validate用来点提交时再次校验
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		login(ruleForm).then((res)=>{
			if(res.data.state == 'managerSuccess' || res.data.state == 'nurseSuccess'){
				if(res.data.state == 'managerSuccess'){
					sessionStorage.setItem("name",ruleForm.name);
					router.push("/managerHome");
				}
				if(res.data.state == 'nurseSuccess'){
					sessionStorage.setItem("name",ruleForm.name);
					router.push("/nurseHome");
				}
			}
			else{
				ElMessage.error(res.data.state)
			}
		})
    } else {
      ElMessage.error("有必填项未填！");
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>